<template>
 <div class="discover">
  <myheader></myheader>
   {{goodInfo.goods_name}}
  <mt-button type="primary" size="large" @click="changeNum">mapMutations:changeNum</mt-button>
  <div class="num">
    num:{{num}}
  </div>
  <mt-button @click="showMyModal">显示模态框</mt-button>
  <transition name='fade'>
    <my-modal
      :title="modalTitle"
      :btnLeft='btnLeft'
      :btnRight='btnRight'
      :useBtn='true'
      v-if="isShow"
      @cancelFn='testLeftBtn'
      @sureFn='testRightBtn'
      >
      <div>5</div>
      <!-- <template slot-scope='slotProps'>
        <div v-for="(index, item) in todoList" :key="index">
          {{item.name}}
        </div>
      </template> -->
    </my-modal>
  </transition>
  <tabbar
      @click="getTabbarFn"
      ref='tabbar'
    >
  </tabbar>
 </div>
</template>
<script>
import api from '../api/index.js'
import {mapMutations,mapState} from 'vuex'
import { Button } from 'mint-ui'
import myModal from '../components/myModal'
import tabbar from '../components/tabbar'
import myheader from '../components/header'

export default {
  data () {
    return {
      modalTitle: '获取用户信息',
      modalContent: '我是内容',
      btnLeft: {
        text: '返回',
        fontColor: '#fff',
        bgColor: '#dcdcdc'
      },
      btnRight: {
        text: '确定',
        fontColor: '#fff',
        bgColor: '#ff9500'
      },
      isShow: false,
      gid: '',
      goodInfo: {},
      todoList: [
        {name: 1},
        {name: 2},
        {name: 3},
      ]
    }
  },
  methods: {
    // 直接触发子组件的事件
    getTabbarFn() {
      this.$refs.tabbar.jumpRouter()
    },
    // 获取商品详情
    _getGoodInfo(gid) {
      let data = {
        Token: this.actoken,
        user_id: this.$store.state.user_id,
        gid: gid
      }
      api.getGoodInfo(data).then(res => {
        console.log(res, '商品详情');
        if (res.ResultCode === 200) {
          this.goodInfo = res.ReturnData
        }
      })
    },
    ...mapMutations([
      'changeNum'
    ]),
    // 显示模态框
    showMyModal() {
      this.isShow = true
    },
    // 左边按钮事件
    testLeftBtn() {
      console.log('left');
      this.isShow = false
    },
    // 右边按钮事件
    testRightBtn() {
      console.log('right');
    }
  },
  components: {
    mtButton: Button,
    myModal,
    tabbar,
    myheader
  },
  computed: {
    ...mapState([
      'num',
      'actoken'
    ])
  },
  created () {
    if (this.$route.query) {
      this.gid = this.$route.query.gid
    }
  },
  mounted () {
    this._getGoodInfo(this.gid)
  }
}
</script>
<style lang="scss" scoped>
.discover{
  font-size: 16px;
  // 动画
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter,
  .fade-leave-to  {
    opacity: 0;
  }
}
</style>
